/**
 * @author:linjiye
 * @date:2025/1/4
 * @desc:
 **/

import {Animated,FlatList, Modal, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import React, {useEffect, useRef, useState} from 'react'

type Props = {}

const FcDropdownMenu = ({ options, placeholder }: Props) => {
    const [modalVisible, setModalVisible] = useState(false);
    const [selectedValue, setSelectedValue] = useState(placeholder);
    const modalAnim = useRef(new Animated.Value(0)).current;

    const showModal = () => {
        Animated.spring(modalAnim, {
            toValue: 1,
            useNativeDriver: true,
        }).start();
    };

    const hideModal = () => {
        Animated.spring(modalAnim, {
            toValue: 0,
            useNativeDriver: true,
        }).start();
    };

    // useEffect(() => {
    //     if (visible) {
    //         showModal();
    //     } else {
    //         hideModal();
    //     }
    // }, [visible]);

    const toggleModal = () => {
        setModalVisible(!modalVisible);
            if (modalVisible) {
                showModal();
            } else {
                hideModal();
            }
    };

    const selectOption = (option) => {
        setSelectedValue(option);
        toggleModal();
    };

    const renderOption = ({ item }) => (
        <TouchableOpacity style={styles.option} onPress={() => selectOption(item)}>
            <Text style={styles.optionText}>{item}</Text>
        </TouchableOpacity>
    );

    return (
        <View style={styles.container}>
            <TouchableOpacity style={styles.dropdown} onPress={toggleModal}>
                <Text style={styles.selectedText}>{selectedValue}</Text>
            </TouchableOpacity>

            <Modal transparent={true} visible={modalVisible} animationType="slide">
                <Animated.View style={styles.modalOverlay}>
                    <Animated.View style={styles.modalContainer}>
                        <FlatList
                            data={options}
                            renderItem={renderOption}
                            keyExtractor={(item) => item}
                        />
                        <TouchableOpacity style={styles.closeButton} onPress={toggleModal}>
                            <Text style={styles.closeButtonText}>关闭</Text>
                        </TouchableOpacity>
                    </Animated.View>
                </Animated.View>
            </Modal>
        </View>
    );
}

export default FcDropdownMenu

const styles = StyleSheet.create({
    appContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    container: {
        width: '80%',
    },
    dropdown: {
        padding: 15,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 5,
        backgroundColor: '#fff',
    },
    selectedText: {
        fontSize: 16,
    },
    modalOverlay: {
        height: 300,
        backgroundColor: 'white',
        marginTop: 100
        // flex: 1,
        // backgroundColor: 'rgba(0, 0, 0, 0.5)',
        // justifyContent: 'center',
        // alignItems: 'center',
    },
    modalContainer: {
        width: '80%',
        backgroundColor: '#fff',
        borderRadius: 10,
        padding: 20,
    },
    option: {
        padding: 15,
    },
    optionText: {
        fontSize: 16,
    },
    closeButton: {
        marginTop: 10,
        padding: 15,
        backgroundColor: '#007BFF',
        borderRadius: 5,
        alignItems: 'center',
    },
    closeButtonText: {
        color: '#fff',
    },
})